<template>
	<view class="container">
		<!-- 标题区域 -->
		<view class="header">
			<view class="title-border">
				<text class="title">十大榜单</text>
			</view>
		</view>

		<!-- 今日热榜轮播 -->
		<view class="hot-list-container">
			<swiper class="hot-list-swiper" vertical autoplay circular interval="3000">
				<swiper-item v-for="(item, index) in hotList" :key="index">
					<view class="hot-item">
						<uni-icons type="fire" size="16" color="#ff4d4f"></uni-icons>
						<text class="hot-rank">{{ index + 1 }}.</text>
						<text class="hot-text">{{ item }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 榜单列表 -->
		<view class="rank-list">
			<view v-for="(item, index) in rankList" :key="index" class="rank-card" :style="{
          transform: `rotateY(${index % 2 === 0 ? '5deg' : '-5deg'})`,
          zIndex: rankList.length - index
        }">
				<view class="rank-number">{{ index + 1 }}</view>
				<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
				<view class="content">
					<view class="user-info">
						<text class="username">{{ item.username }}</text>
						<text class="time">{{ item.time }}</text>
					</view>
					<text class="question">{{ item.question }}</text>
					<view class="tags">
						<text class="tag">#{{ item.tag }}</text>
					</view>
					<view class="interaction">
						<view class="like">
							<uni-icons type="hand-up" size="16" color="#999"></uni-icons>
							<text>{{ item.like }}</text>
						</view>
						<view class="comment">
							<uni-icons type="chat" size="16" color="#999"></uni-icons>
							<text>{{ item.comment }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 模拟数据
	const hotList = ref([
		'校园周边新开了一家奶茶店，同学们快去打卡',
		'求代课：周三上午三四节计算机课程',
		'图书馆自习室新增了充电插座',
		'校园跑腿互助需求激增，快来参与',
		'毕业季二手交易市场火热进行中'
	])

	const rankList = ref([{
			avatar: '/static/avatar/1.jpg',
			username: '神秘同学1560562221',
			time: '15小时前',
			question: '有没有可以8月一起去武汉看*晗演唱会的呀？',
			tag: '日常投稿',
			like: 1,
			comment: 7
		},
		{
			avatar: '/static/avatar/2.jpg',
			username: 'a',
			time: '14小时前',
			question: '问问大家，有没有好用的去黑头产品？一搜全是广',
			tag: '日常投稿',
			like: 0,
			comment: 4
		},
		{
			avatar: '/static/avatar/3.jpg',
			username: 'momo123456',
			time: '11小时前',
			question: '明天图书馆主楼闭馆去哪里背书啊？综合楼几层是专门给背书的啊',
			tag: '日常投稿',
			like: 0,
			comment: 3
		},
		{
			avatar: '/static/avatar/4.jpg',
			username: '神秘111',
			time: '22小时前',
			question: '新区浴室几点开门啊',
			tag: '日常投稿',
			like: 0,
			comment: 2
		},
		{
			avatar: '/static/avatar/1.jpg',
			username: '一点点',
			time: '22小时前',
			question: '求学校**快递',
			tag: '日常投稿',
			like: 0,
			comment: 2
		}
	])
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #f56c6c;
		min-height: 100vh;

		.header {
			margin-bottom: 30rpx;

			.title-border {
				background-color: #ffd700;
				padding: 20rpx 0;
				border-radius: 10rpx;
				text-align: center;

				.title {
					font-size: 40rpx;
					font-weight: bold;
					color: #333;
				}
			}
		}

		.hot-list-container {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

			.hot-list-swiper {
				height: 80rpx;

				.hot-item {
					display: flex;
					align-items: center;
					height: 100%;
					font-size: 28rpx;
					color: #666;

					.hot-rank {
						color: #ff4d4f;
						margin: 0 16rpx 0 12rpx;
						font-weight: bold;
					}
				}
			}
		}

		.rank-list {
			.rank-card {
				display: flex;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 24rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;
				perspective: 1000px;
				transform-style: preserve-3d;

				&:active {
					transform: scale(0.98) rotateY(0deg);
				}

				.rank-number {
					font-size: 36rpx;
					font-weight: bold;
					color: #ffd700;
					width: 60rpx;
					text-align: center;
					align-self: center;
				}

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin: 0 20rpx;
				}

				.content {
					flex: 1;

					.user-info {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.username {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
						}

						.time {
							font-size: 24rpx;
							color: #999;
						}
					}

					.question {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 10rpx;
						line-height: 1.4;
					}

					.tags {
						margin-bottom: 10rpx;

						.tag {
							font-size: 24rpx;
							color: #999;
						}
					}

					.interaction {
						display: flex;
						justify-content: flex-end;

						.like,
						.comment {
							display: flex;
							align-items: center;
							margin-left: 20rpx;
							font-size: 24rpx;
							color: #999;

							uni-icons {
								margin-right: 6rpx;
							}
						}
					}
				}
			}
		}
	}
</style>